<script setup lang="ts">
import { useAppStore } from '@/store/appStore'

defineExpose({ open })

const appStore = useAppStore()
const dialogRef = ref()

function open() {
  dialogRef.value.showEvent()
}
function checkEvent(val: any) {
  appStore.toggleStyle(val.detail.value)
}
</script>

<template>
  <CommonDrawer ref="dialogRef" mode="right" :is-close="true">
    <view class="h-screen bg-#f8f8f8">
      <view class="flex items-center bg-light p-sm text-lg">
        <view i-material-symbols:account-box class="mr-sm text-7 text-theme" />
        <text>
          Hello, lawzhuo
        </text>
      </view>

      <view class="p-sm">
        <view class="mb-lg rounded-xl bg-light px-sm pb-sm pt-lg">
          <view class="text-4">
            账号设置
          </view>
          <view class="flex items-center justify-between py-sm">
            修改密码
            <view class="text-3" i-material-symbols:arrow-forward-ios-rounded />
          </view>
          <view class="flex items-center justify-between py-sm">
            绑定手机号
            <view class="text-3" i-material-symbols:arrow-forward-ios-rounded />
          </view>
        </view>

        <view class="mb-lg rounded-xl bg-light px-sm py-lg">
          <view class="mb-sm text-4">
            主题设置
          </view>
          <radio-group @change="checkEvent">
            <label v-for="item in appStore.styleList" :key="item.value">
              <radio class="scale-70" :value="item.value" :checked="appStore.style === item.value" :class="{ 'checkout-class': appStore.style === item.value }" />
              {{ item.label }}
            </label>
          </radio-group>
        </view>

        <view class="rounded-xl bg-light px-sm py-lg">
          <view class="mb-sm text-4">
            Icon
          </view>

          <CommonIcon />
        </view>
      </view>
    </view>
  </CommonDrawer>
</template>

<style scoped lang="scss">
:deep(.uni-drawer__content--visible) {
  width: 80vw !important;
}
:deep(.checkout-class .uni-radio-input) {
  background-color: var(--theme-color) !important;
  border-color: var(--theme-color) !important;
}
</style>
